<template>
  <div class="edit">
    <div class="edit-list">
      <!-- 触发父级的方法 -->
      <button @click="$emit('zdyRun')">运行</button>
      <button @click="clear">清空</button>
    </div>
    <div class="edit-box">
      <textarea ref="tex" :value="code" @input="handleInput" @keydown.9.prevent="handleKeyDown"></textarea>
      <!-- <textarea v-model="code"></textarea> -->
    </div>
  </div>
</template>

<script>
export default {
  name:'edit',
  data(){
    return{
      code:''
    }
  },
  methods:{
    handleInput(e){
      //输入就会传给父组件
      this.code = e.target.value;
      //发布订阅，子父通信
      this.$emit('zdyInput',this.code);
    },
    handleKeyDown(e){
      //Tab键两个空格
      let cur = e.srcElement.selectionStart;
      this.code = this.code.slice(0,cur) + '  ' + this.code.slice(cur);
      this.$nextTick(()=>{
        this.$refs.tex.setSelectionRange(cur+2,cur+2);
      })
    },
    clear(){
      this.code=''
    },
  }
};
</script>

<style lang="scss">
.edit {
  .edit-list {
    padding:10px;
    button{
      height:40px;
      width:80px;
      margin:5px;
    }
    background: #ccc;
  }
  .edit-box {
    position:absolute;
    top:60px;
    bottom:0;
    left:0;
    right:0;
    textarea{
      border:none;
      outline:none;
      width:50%;
      height:100%;
      font-size: 24px;
    }
  }
}
</style>